<template>
  <div class="head">
    <!-- 背景图 -->
    <van-icon name="arrow-left" class="goback" @click="$router.go(-1)" />
    <img src="../../assets/imgs/shop-bg.webp" alt="" class="bg" />

    <!-- 内容 -->
    <div class="center">
      <div class="sell-img">
        <img src="../../assets/imgs/logo.webp" alt="" />
      </div>

      <div class="detail">
        <h3 @click="show = true">
          <span>品牌</span>
          <b>烧鹅饭&nbsp;(&nbsp;源妹店&nbsp;)&nbsp;</b>
        </h3>
        <h4>蜂鸟专送 / 38分钟送达</h4>
        <p>
          <span>减</span>
          <b>在线支付满28减5 , 满50减10</b>
        </p>
      </div>
    </div>
    <div class="c-count" @click="show = true">跟多 &gt;</div>

    <!-- 底部 -->
    <div class="gg-d">
      <span>公告</span>
      <p>走知道送达hi立法搜集的撒点附近破碎机 打死了好久都来看</p>
      <i>&gt;</i>
    </div>

    <van-overlay :show="show" @click="show = false" class="mask">
      <div class="wrapper" @click.stop>
        <div class="tips-top">
          <h3>
            源码大烧鸡 ( 烧 鸡 村 )
          </h3>
          <van-rate
            v-model="value"
            readonly
            gutter="15px"
            size="25px
          "
          />
        </div>
        <div class="tips-center">
          <van-divider :style="{ fontSize: '18px', color: '#fff' }"
            >优惠信息</van-divider
          >
          <ul>
            <li>
              <span>减</span>
              <p>在线支付满28减5 , 满50减10</p>
            </li>
            <li>
              <span>减</span>
              <p>在线支付满28减5 , 满50减10</p>
            </li>
            <li>
              <span>减</span>
              <p>在线支付满28减5 , 满50减10</p>
            </li>
            <li>
              <span>减</span>
              <p>在线支付满28减5 , 满50减10</p>
            </li>
          </ul>
        </div>

        <div class="tips-foo">
          <van-divider :style="{ fontSize: '18px', color: '#fff' }"
            >商家公告</van-divider
          >
          <p>
            阿贾克斯电话卡实践活动看似简单换福卡接受的哈酸度计否凉快圣诞节发哦is等级分类考试江苏科技的很快就水电费克鲁赛德好家伙啥地方合适的框架浩丰科技
          </p>
        </div>

        <van-icon
          name="cross"
          @click="show = false"
          size="25px"
          class="close"
        />
      </div>
    </van-overlay>
  </div>
</template>

<script>
export default {
  data () {
    return {
      show: false,
      value: 3
    }
  }
}
</script>

<style lang="less" scoped>
.head {
  overflow: hidden;
  color: #fff;
  height: 100%;
  position: relative;

  .c-count {
    font-size: 14px;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 30px;
    position: absolute;
    top: 55%;
    right: 10px;
    padding: 5px 8px;
    font-family: simsun;
    font-style: normal;
  }

  .gg-d {
    font-size: 14px;
    padding: 8px 10px;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    span {
      color: #000;
      border-radius: 5px;
      background-color: #fff;
      margin-right: 5px;
      white-space: nowrap;
      padding: 2px;
    }
    p {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    i {
      font-family: simsun;
      font-style: normal;
    }
  }
}

.center {
  color: #fff;
  height: 120px;
  display: flex;
  padding: 30px 0 0 30px;
  box-sizing: border-box;
}
.detail {
  h3 {
    font-size: 16px;
    display: flex;
    align-items: center;
    word-spacing: 2px;
    span {
      font-size: 12px;
      margin-top: 2px;
      margin-right: 5px;
      background-color: crimson;
      border-radius: 2px;
      padding: 2px;
    }
  }
  h4 {
    font-weight: normal;
    font-size: 14px;
    line-height: 24px;
  }

  p {
    font-weight: 200;
    font-size: 14px;
    span {
      font-size: 12px;
      font-weight: 400;
      margin-right: 5px;
      color: crimson;
      background-color: #fff;
      padding: 2px 3px;
      border-radius: 2px;
    }
  }
}
.sell-img {
  margin-right: 10px;
  img {
    border-radius: 5px;
    height: 60px;
    width: 60px;
  }
}

.bg {
  filter: blur(2px);
  z-index: -1;
  position: absolute;
  left: 0;
  top: 0;
}
.goback {
  font-size: 20px;
  padding: 5px;
  position: absolute;
  top: 5px;
  left: 5px;
  color: #fff;
}
.wrapper {
  //   align-items: center;
  //   display: flex;
  //   justify-content: flex-start;
  //   flex-direction: column;
  padding: 30px 30px;

  .tips-top {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin-top: 80px;
    h3 {
      margin-bottom: 20px;
    }
  }
  .tips-center {
    font-size: 14px;
    li {
      margin-left: 20px;
      margin-top: 15px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      span {
        margin-right: 5px;
        font-size: 12px;
        background-color: darkseagreen;
        padding: 4px;
        border-radius: 5px;
      }
    }
  }
  .tips-foo {
    margin-top: 20px;
    margin-bottom: 40px;
    p {
      margin-top: 10px;
      padding: 0 30px;
      line-height: 25px;
    }
  }
}
.close {
  display: flex;
  justify-content: center;
}
</style>
